<template>
    <div 
        class="verify-code"
    >
        <text class="verify-code-title">{{ title }}</text>

        <div class="verify-code-cont">
            <div class="verify-code-list" 
                @click="setCode" 
                :style="{ 
                    'background-color': containerBackgroundColor
                }"
            >
                <text :style="code.style" v-for="code in codeShow" :key="code.char" class="verify-code-list-text">
                    {{code.char || code}}
                </text>
            </div>
            <i :class="[ ifont, 'icon verify-code-iconfont']" @click="setCode"></i>
        </div>
        <div class="verify-input-btn">
            <input type="text" v-model="inputValue" :class="[stateColor]" :maxlength="codeLength" class="verify-input-btn-input">
        </div>
    </div>
</template>
<script>
    const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
    const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

    export default {
        props:{
            width:{
                type: String,
                default:'520px'
            },
            
            height:{
                type: String,
                default:'325px'
            },

            // 背景色
            backgroundColor: {
                type: String,
                default:'#fff'
            },
            
            // 字体颜色
            fontColor: {
                type: String,
                default:"#000"
            },
            // 标题
            title: {
                type: String,
                default:"请输入图形验证码"
            },

            // 支持字体标签
            iconfont: {
                type: String,
                default:''
            },
            // 验证码长度
            codeLength: {
                type: Number,
                default: 6
            }
        },

        data() {
           return {
                isEnd:false,
                lock:false,
                stateColor:'',
                inputValue:'',
                containerBackgroundColor: '#fff',
                containerColor: '#fff',
                codeChose: '', // 应该输入的code
                codeShow: [] // 显示用的
           }
        },

        watch: {
            // type变化则全面刷新
            type: {
                immediate: true,
                handler() {
                    this.init()
                }
            },

            inputValue() {
                this.stateColor = ''
                if( this.inputValue.length >= this.codeLength) {
                    this.checkCode()
                }
            }
        },
        
        computed:{
            ifont() {
                return this.iconfont === ''  ? 'icon-shishigengxin': this.iconfont
            }
        },

        methods:{
            init() {
                this.setCode()
                this.$parent.$emit('ready', this)
            },

            /**
             * setCode
             * @description 设置验证码
             * */
            setCode() {
                if( this.lock ) return ;
                this.lock = true
                if (this.isEnd == false) {
                    this.containerBackgroundColor = _code_color1[Math.floor(Math.random() * 3)]
                    this.containerColor = _code_color2[Math.floor(Math.random() * 5)]
                    this.inputValue = ''

                    this.codeShow = []
                    this.codeChose = ''
                    for (var i = 0; i < this.codeLength; i++) {
                        var charNum = Math.floor(Math.random() * 52)
                        var tmpStyle = (charNum % 2 == 0) ? "font-style:italic;margin-right: 10px" : "font-weight:bolder"
                        tmpStyle += (Math.floor(Math.random() * 2) == 1) ? "font-weight:bolder" : ""

                        this.codeChose += _code_chars[charNum]
                        this.codeShow.push({
                            style: tmpStyle + `; color:${this.containerColor}`,
                            char: _code_chars[charNum]
                        })
                    }
                
                    this.lock = false
                }
            },

            /**
             * checkCode
             * @description 验证验证码
             * */
            checkCode() {
                let inputValue
                let codeChose

                inputValue = this.inputValue.toUpperCase()
                codeChose = this.codeChose.toUpperCase()

                if (inputValue == codeChose) {
                    this.isEnd = true
                    this.$emit('success', this)
                } else {
                    this.stateColor ="error"
                    this.$emit('error', this)
                }
            },
            /**
             * refresh
             * @description 刷新
             * */
            refresh() {
                this.isEnd = false
                this.inputValue = ''
                this.setCode()
            }
        }
    }
</script>

<style scoped>
.verify-code {
    padding-top:32px;
    padding-bottom:32px;
    padding-left:52px;
    padding-right:52px;
    box-sizing: border-box;
    width:520px;
    height: 325px;
}


.verify-code-title {
    font-size: 32px;
    color: #333;
    text-align: center;
    margin-bottom: 32px;
    width:416px;
}

.verify-code-cont {
    width:416px;
    display:flex;
    align-items: center;
}

.verify-code-list {
    display: flex;
    background: #F3F3F3;
    width:416px;
    flex-direction: row;
    height: 80px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.verify-code-list-text {
    font-size:40px;
    display:flex;
    flex:1;
    margin-top:-40px;
    justify-content: center;
    /* width:68px;
    height: 80px;
    justify-content: center;
    align-items: center; */
    /* height:80px;
   
    
    line-height: 1;
    justify-content: center; */
    /* align-items: center; */
}

.verify-code-iconfont {
    font-size: 46px;
    width: 50px;
    margin-left: 25px;
    color: #7b7878;
}

.verify-input-btn {
    display: flex;
    padding-top:30px;
}

.verify-input-btn-input {
    display: flex;
    flex:1;
    height: 76px;
    width:416px;
    border-style: 1px;
    border-color: #999;
    border-width: 1px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
    padding-right:10px;
    box-sizing: border-box;
    font-size:24px
}


.verify-input-btn-input.error {
    border-color: red
}
</style>
